/**
 * @description 绿荫操场主题
 */
@charset "utf-8";

body.vue-admin-beautiful-theme-green {
  $base-menu-background: #16181d;
  $base-menu-background-active: #009688;
  $base-color-blue: #009688;

  @mixin container {
    background: $base-menu-background !important;
  }
  /**
    * 已经覆盖的组件
    * 导航栏，按钮，开关，文字按钮，输入框，下拉选择,下拉菜单，标签，加载层，文件上传
    * 分页，多选框，单选按钮，标签页,时间或日期选择,文本域
    */
  //---------el覆盖 START-----------
  @mixin el_border {
    border-color: $base-color-blue !important;
  }
  @mixin el_background {
    background: $base-color-blue !important;
  }
  @mixin el_container {
    @include el_background;
    @include el_border;
  }

  @mixin el_box_show {
    box-shadow: -1px 0 0 0 $base-color-blue !important;
  }
  .el-button--primary,
  .el-switch.is-checked .el-switch__core,
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-pagination.is-background .el-pager li:not(.disabled).active,
  .el-radio__input.is-checked .el-radio__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    @include el_container;
  }
  .el-button--text,
  .el-checkbox__input.is-checked + .el-checkbox__label,
  .el-loading-spinner .el-loading-text,
  .el-loading-spinner i,
  .el-radio__input.is-checked + .el-radio__label,
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-selectable.in-checked-path,
  .el-cascader-node.is-active,
  .el-dropdown-menu__item:focus,
  .el-dropdown-menu__item:not(.is-disabled):hover,
  .el-tabs__item.is-active,
  .el-upload--picture-card:hover,
  .el-tabs__item:hover,
  .el-upload:focus,
  .el-radio-button__orig-radio:not(:checked) + .el-radio-button__inner:hover,
  .el-button--default:not(.el-button--primary):active,
  .el-button--default:not(.el-button--primary):hover,
  .el-button--default:not(.el-button--primary):focus,
  .el-tag:not(.el-tag--danger):not(.el-tag--success):not(.el-tag--info):not(.el-tag--warning) {
    color: $base-color-blue;
  }
  .el-checkbox__inner:hover,
  .el-select .el-input.is-focus .el-input__inner,
  .el-input__inner:focus,
  .el-range-editor.is-active:hover,
  .el-range-editor.is-activ,
  .el-upload--picture-card:hover,
  .el-upload:focus,
  .el-textarea__inner:focus,
  .el-button--default:not(.el-button--primary):active,
  .el-button--default:not(.el-button--primary):hover,
  .el-button--default:not(.el-button--primary):focus,
  .el-range-editor.is-active {
    @include el_border;
  }
  .el-tabs__active-bar {
    @include el_background;
  }

  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    @include el_container;
    @include el_box_show;
  }
  //---------el覆盖 END-----------

  @mixin active {
    &:hover {
      background-color: $base-menu-background-active !important;
    }

    &.is-active {
      background-color: $base-menu-background-active !important;
    }
  }

  .logo-container-horizontal {
    @include container;
  }

  .logo-container-vertical {
    @include container;
  }

  .el-menu {
    @include container;

    .el-submenu__title {
      @include container;
    }

    .el-menu-item {
      @include container;
    }
  }

  .side-bar-container,
  .Fold {
    @include container;

    .el-menu-item {
      @include active;
    }
  }

  .top-bar-container {
    @include container;

    .vab-main {
      @include container;

      .el-menu {
        &--horizontal {
          .el-submenu,
          .el-menu-item {
            &.is-active {
              background-color: $base-menu-background-active !important;
            }
          }

          > .el-menu-item {
            &.is-active {
              border-bottom: 3px solid $base-menu-background-active !important;
            }
          }
        }
      }
    }
  }

  .tabs-bar-container {
    background: $base-color-white;
    border-top: 1px solid #f6f6f6;

    .tabs-content {
      .el-tabs__header {
        .el-tabs__item {
          &.is-active {
            color: $base-color-blue !important;
            background: $base-color-white !important;
            border: 1px solid $base-color-blue !important;
          }
        }
      }
    }
  }

  .theme-bar-setting {
    background: $base-color-blue !important;
  }
}
